import { IEchartsData } from '@/model/echarts/echartsInter'
import { categoryData, dataFlag, markPoint, noSeries } from '@/utils/echartsCommonFun'
import {
  EChartsOption,
  TooltipOption
} from 'echarts/types/dist/shared'

export function Chart (datas:IEchartsData) {
  const series = []
  let category:Array<string> = []
  // let unit:string = ''
  const flag = dataFlag(datas.data)
  if (flag > 0 && flag === datas.data.length) { // 没有数据
    series.push(noSeries())
  } else {
    datas.data.forEach(data => {
      if (data.value) {
        data.value.forEach(item => {
          category = categoryData(category, item.name)
        })
      }
    })
    if (category.length) {
      datas.data.forEach(data => {
        const value:Array<{name:string, value:number}> = []
        category.forEach((name, i) => {
          let val:{ name: string; value: number } = {} as { name: string; value: number }
          data.value.forEach(item => {
            if (name === item.name) {
              val = item
            }
          })
          value.push(val)
        })
        series.push({
          name: data.name,
          type: 'scatter',
          data: value,
          coordinateSystem: 'polar',
          symbol: 'circle',
          symbolSize: 6,
          markPoint: markPoint(data),
          animationDuration: 2800,
          animationEasing: 'cubicInOut'
        })
      })
    }
  }
  return {
    color: ['#EF6684', '#77C14C', '#65B1FF'],
    polar: {},
    angleAxis: {
      type: 'category',
      data: category,
      boundaryGap: false,
      splitLine: {
        show: true
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    radiusAxis: {
      type: 'value',
      axisLine: {
        show: false
      },
      axisLabel: {
        show: false
      }
    },
    tooltip: tooltip(),
    series: series
  } as EChartsOption
}

function tooltip () {
  return {
    trigger: 'axis',
    confine: true,
    axisPointer: {
      textStyle: {
        color: '#fff'
      }
    }
  } as TooltipOption
}
